<template>
  <div class="m-4">
    <el-cascader :options="cascaderOptions" :props="cascaderProps" collapse-tags collapse-tags-tooltip clearable
      style="width: 350px" @change="handleCascaderChange" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted,  ref, defineProps, defineEmits } from 'vue';

const emit = defineEmits(['handleFilterChange']);
const props = defineProps({
  selectData: {
    type: Object,
    required: true,
  },
});

const cascaderOptions = ref([]);
const cascaderProps = ref({
  multiple: true,
  value: 'value',
  label: 'label',
  children: 'children',
});

onMounted(() => {
  cascaderOptions.value = Object.keys(props.selectData).map((faculty) => {
    return {
      value: faculty,
      label: faculty,
      children: Object.keys(props.selectData[faculty]).map((major) => {
        const totalClasses = props.selectData[faculty][major];
        const classesArray = Array.from({ length: totalClasses }, (_, index) => index + 1);

        return {
          value: major,
          label: major,
          children: classesArray.map((classNumber) => {
            return {
              value: classNumber,
              label: `${classNumber}班`,
            };
          }),
        };
      }),
    };
  });
});

const handleCascaderChange = (selected: any) => {
  emit('handleFilterChange', selected);
};

</script>
